<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX网上商城 - 首页</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        a:hover {
            color: #e4393c;
        }

        ul {
            list-style: none;
        }

        /* 按钮样式 */
        button,
        .btn {
            display: inline-block;
            padding: 8px 20px;
            background-color: #e4393c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        button:hover,
        .btn:hover {
            background-color: #c91623;
        }

        /* 头部样式 */
        .header {
            background-color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo h1 {
            color: #e4393c;
            font-size: 24px;
        }

        #student-info {
            font-size: 12px;
            color: #999;
        }

        .search-box {
            display: flex;
            width: 400px;
        }

        .search-box input {
            flex: 1;
            padding: 10px;
            border: 1px solid #e4393c;
            border-right: none;
            outline: none;
        }

        .search-box button {
            padding: 0 20px;
        }

        .user-actions a {
            margin-left: 15px;
            color: #666;
        }

        .user-actions a:hover {
            color: #e4393c;
        }

        .cart-icon {
            position: relative;
            padding-left: 25px;
        }

        .cart-icon::before {
            content: "🛒";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        /* 主导航 */
        .main-nav {
            background-color: #e4393c;
            color: white;
        }

        .main-nav ul {
            display: flex;
        }

        .main-nav li {
            position: relative;
        }

        .main-nav li a {
            display: block;
            padding: 15px 20px;
            color: white;
        }

        .main-nav li a:hover {
            background-color: #c91623;
        }

        /* 轮播图 */
        .banner {
            margin-bottom: 30px;
        }

        .slider {
            position: relative;
            height: 400px;
            overflow: hidden;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slide.active {
            opacity: 1;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slider-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }

        .slider-controls button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            width: 40px;
            height: 60px;
            font-size: 20px;
            cursor: pointer;
        }

        .slider-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .slider-dots .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
        }

        .slider-dots .dot.active {
            background-color: white;
        }

        /* 商品分类 */
        .categories {
            margin-bottom: 30px;
        }

        .categories h2 {
            font-size: 22px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .category-list {
            display: flex;
            justify-content: space-between;
        }

        .category-item {
            width: 18%;
            text-align: center;
            background-color: white;
            padding: 15px 0;
            border-radius: 5px;
            transition: transform 0.3s;
        }

        .category-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .category-item img {
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
        }

        /* 商品列表 */
        .hot-products h2 {
            font-size: 22px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .product-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .product-item {
            background-color: white;
            border-radius: 5px;
            overflow: hidden;
            transition: transform 0.3s;
            cursor: pointer;
        }

        .product-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            height: 200px;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .product-item:hover .product-image img {
            transform: scale(1.05);
        }

        .product-info {
            padding: 15px;
        }

        .product-title {
            font-size: 16px;
            margin-bottom: 10px;
            height: 40px;
            overflow: hidden;
        }

        .product-price {
            color: #e4393c;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .product-actions {
            display: flex;
            justify-content: space-between;
        }

        /* 页脚 */
        .footer {
            background-color: white;
            padding: 30px 0;
            margin-top: 50px;
        }

        .footer-links {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .footer-column li {
            margin-bottom: 8px;
        }

        .footer-column a:hover {
            color: #e4393c;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #eee;
            color: #999;
            font-size: 14px;
        }

        /* 登录页样式 */
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 70vh;
        }

        .login-box {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            width: 400px;
        }

        .login-box h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .error-message {
            color: red;
            font-size: 12px;
            margin-top: 5px;
        }

        .form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .register-link {
            color: #e4393c;
        }

        /* 商品详情页样式 */
        .product-detail {
            margin-top: 30px;
        }

        .breadcrumb {
            margin-bottom: 20px;
            color: #666;
        }

        .product-container {
            display: flex;
            gap: 30px;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .product-gallery {
            width: 40%;
        }

        .main-image {
            height: 400px;
            border: 1px solid #eee;
            border-radius: 5px;
            overflow: hidden;
        }

        .main-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-info {
            width: 60%;
        }

        .product-title {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .product-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            color: #666;
        }

        .price-section {
            background-color: #f5f5f5;
            padding: 15px;
            margin-bottom: 20px;
        }

        .price {
            font-size: 28px;
            color: #e4393c;
            font-weight: bold;
        }

        .product-options {
            margin-bottom: 20px;
        }

        .option {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .option label {
            margin-right: 15px;
        }

        .quantity {
            display: flex;
            align-items: center;
        }

        .quantity button {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .quantity input {
            width: 50px;
            height: 30px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 0 5px;
        }

        .actions {
            display: flex;
            gap: 15px;
        }

        .btn-large {
            padding: 12px 30px;
            font-size: 16px;
        }

        .btn-primary {
            background-color: #ff4400;
        }

        .btn-primary:hover {
            background-color: #e63900;
        }

        .product-tabs {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
        }

        .tab-nav {
            display: flex;
            border-bottom: 1px solid #eee;
        }

        .tab-nav li {
            padding: 15px 30px;
            cursor: pointer;
            font-weight: bold;
        }

        .tab-nav li.active {
            color: #e4393c;
            border-bottom: 2px solid #e4393c;
        }

        .tab-content {
            padding: 20px;
        }

        .tab-pane {
            display: none;
        }

        .tab-pane.active {
            display: block;
        }

        .tab-pane h3 {
            margin-bottom: 15px;
        }

        .spec-table {
            width: 100%;
            border-collapse: collapse;
        }

        .spec-table td {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .spec-name {
            width: 30%;
            color: #666;
        }

        .review-list {
            margin-top: 20px;
        }

        .review-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .review-user {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .review-date {
            color: #999;
            font-size: 12px;
            margin-top: 5px;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .modal-content {
            background-color: #f5f5f5;
            margin: 5% auto;
            padding: 20px;
            border-radius: 10px;
            width: 90%;
            max-width: 1200px;
            position: relative;
        }

        .close {
            color: #aaa;
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 提示框样式 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 100;
        }

        .toast.show {
            opacity: 1;
        }

        /* 搜索结果样式 */
        .search-results {
            margin-top: 30px;
        }

        .search-results h2 {
            font-size: 22px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .search-results .product-list {
            grid-template-columns: repeat(4, 1fr);
        }

        .no-results {
            text-align: center;
            padding: 50px 0;
        }

        /* 购物车模态框样式 */
        .cart-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .cart-item-image {
            width: 100px;
            height: 100px;
            margin-right: 15px;
        }

        .cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-info h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .cart-item-info .price {
            color: #e4393c;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .cart-item-info .quantity {
            display: flex;
            align-items: center;
        }

        .cart-item-info .quantity button {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cart-item-info .quantity input {
            width: 50px;
            height: 30px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 0 5px;
        }

        .cart-item-info .remove-item {
            margin-left: 15px;
        }

        .cart-total {
            text-align: right;
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1><a href="javascript:void(0)" onclick="goHome()">李佳轩的网店</a></h1>
                <p id="student-info">学号：23215220320 姓名：李佳轩</p>
            </div>
            <div class="search-box">
                <input type="text" id="search-input" placeholder="搜索商品...">
                <button id="search-btn">搜索</button>
            </div>
            <div class="user-actions">
                <a href="javascript:void(0)" id="login-link">登录</a>
                <a href="javascript:void(0)" id="register-link">注册</a>
                <a href="javascript:void(0)" id="profile-link" style="display: none;">个人中心</a>
                <a href="javascript:void(0)" id="logout-link" style="display: none;">退出</a>
                <a href="javascript:void(0)" class="cart-icon">购物车(<span id="cart-count">0</span>)</a>
            </div>
        </div>
    </header>

    <!-- 主导航 -->
    <nav class="main-nav">
        <div class="container">
            <ul>
                <li><a href="javascript:void(0)" onclick="goHome()">首页</a></li>
                <li><a href="javascript:void(0)">手机数码</a></li>
                <li><a href="javascript:void(0)">电脑办公</a></li>
                <li><a href="javascript:void(0)">家用电器</a></li>
                <li><a href="javascript:void(0)">食品生鲜</a></li>
                <li><a href="javascript:void(0)">图书音像</a></li>
            </ul>
        </div>
    </nav>

    <!-- 轮播图 -->
    <section class="banner">
        <div class="slider">
            <!-- 活动图片1：假设文件名为 promo1.jpg -->
            <div class="slide active">
                <img src="./images/activity/promo1.jpg" alt="促销活动1">
            </div>
            <!-- 活动图片2：假设文件名为 promo2.jpg -->
            <div class="slide">
                <img src="./images/activity/promo2.jpg" alt="促销活动2">
            </div>
            <!-- 活动图片3：假设文件名为 promo3.jpg -->
            <div class="slide">
                <img src="./images/activity/promo3.jpg" alt="促销活动3">
            </div>
            <!-- 滑动控制按钮 -->
            <div class="slider-controls">
                <button class="prev">❮</button>
                <button class="next">❯</button>
            </div>
            <div class="slider-dots"></div>
        </div>
    </section>

    <!-- 商品分类 -->
    <section class="categories">
        <div class="container">
            <h2>商品分类</h2>
            <div class="category-list">
                <div class="category-item">
                    <img src="./images/classification/手机.jpg" alt="手机">
                    <p>手机数码</p>
                </div>
                <div class="category-item">
                    <img src="./images/classification/电脑.jpg" alt="电脑">
                    <p>电脑办公</p>
                </div>
                <div class="category-item">
                    <img src="./images/classification/家电.jpg" alt="家电">
                    <p>家用电器</p>
                </div>
                <div class="category-item">
                    <img src="./images/classification/食品.jpg" alt="食品">
                    <p>食品生鲜</p>
                </div>
                <div class="category-item">
                    <img src="./images/classification/图书.jpg" alt="图书">
                    <p>图书音像</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 热门商品 -->
    <section class="hot-products">
        <div class="container">
            <h2>热门商品</h2>
            <div class="product-list" id="hot-products">
                <!-- 商品将通过JS动态加载 -->
            </div>
        </div>
    </section>

    <!-- 搜索结果区域 -->
    <section class="search-results" id="search-results" style="display: none;">
        <div class="container">
            <h2>
                <a href="javascript:void(0)" onclick="goHome()">首页</a> &gt;
                <span id="search-results-title">搜索结果</span>
            </h2>
            <div class="product-list" id="search-results-list">
                <!-- 搜索结果将通过JS动态加载 -->
            </div>
            <div class="no-results" id="no-results" style="display: none;">
                <p>没有找到与 "<span id="search-query"></span>" 相关的商品</p>
                <p>建议您：</p>
                <ul>
                    <li>检查拼写错误</li>
                    <li>尝试使用不同的关键词</li>
                    <li>尝试更宽泛的搜索</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-links">
                <div class="footer-column">
                    <h3>购物指南</h3>
                    <ul>
                        <li><a href="javascript:void(0)">购物流程</a></li>
                        <li><a href="javascript:void(0)">会员介绍</a></li>
                        <li><a href="javascript:void(0)">常见问题</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>配送方式</h3>
                    <ul>
                        <li><a href="javascript:void(0)">上门自提</a></li>
                        <li><a href="javascript:void(0)">211限时达</a></li>
                        <li><a href="javascript:void(0)">配送服务查询</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>支付方式</h3>
                    <ul>
                        <li><a href="javascript:void(0)">货到付款</a></li>
                        <li><a href="javascript:void(0)">在线支付</a></li>
                        <li><a href="javascript:void(0)">分期付款</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>售后服务</h3>
                    <ul>
                        <li><a href="javascript:void(0)">售后政策</a></li>
                        <li><a href="javascript:void(0)">价格保护</a></li>
                        <li><a href="javascript:void(0)">退款说明</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 XX网上商城 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <span class="close" id="close-login">&times;</span>
            <h2>用户登录</h2>
            <form id="login-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" required>
                    <div class="error-message" id="username-error"></div>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required>
                    <div class="error-message" id="password-error"></div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn">登录</button>
                    <a href="javascript:void(0)" class="register-link">没有账号？立即注册</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 商品详情模态框 -->
    <div id="product-modal" class="modal">
        <div class="modal-content">
            <span class="close" id="close-product">&times;</span>
            <div class="product-detail">
                <div class="container">
                    <div class="breadcrumb">
                        <a href="javascript:void(0)" onclick="goHome()">首页</a> &gt;
                        <a href="javascript:void(0)" id="modal-category-link">商品分类</a> &gt;
                        <span id="modal-product-name">商品名称</span>
                    </div>

                    <div class="product-container">
                        <div class="product-gallery">
                            <div class="main-image">
                                <img id="modal-main-image" src="" alt="商品主图">
                            </div>
                        </div>

                        <div class="product-info">
                            <h1 id="modal-product-title">商品标题</h1>
                            <div class="product-meta">
                                <span class="sales">销量: <span id="modal-sales-volume">0</span></span>
                                <span class="reviews">评价: <span id="modal-review-count">0</span></span>
                                <span class="stock">库存: <span id="modal-stock-count">0</span></span>
                            </div>

                            <div class="price-section">
                                <span class="price" id="modal-product-price">¥0.00</span>
                            </div>

                            <div class="product-options">
                                <div class="option">
                                    <label>数量</label>
                                    <div class="quantity">
                                        <button class="decrease">-</button>
                                        <input type="number" id="modal-quantity" value="1" min="1">
                                        <button class="increase">+</button>
                                    </div>
                                </div>
                            </div>

                            <div class="actions">
                                <button id="modal-add-to-cart" class="btn btn-large">加入购物车</button>
                                <button id="modal-buy-now" class="btn btn-large btn-primary">立即购买</button>
                            </div>
                        </div>
                    </div>

                    <div class="product-tabs">
                        <ul class="tab-nav">
                            <li class="active">商品详情</li>
                            <li>规格参数</li>
                            <li>商品评价</li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane active" id="modal-description">
                                <h3>商品描述</h3>
                                <div id="modal-product-description"></div>
                            </div>

                            <div class="tab-pane" id="modal-specifications">
                                <h3>规格参数</h3>
                                <table id="modal-spec-table">
                                    <!-- 规格参数将通过JS动态生成 -->
                                </table>
                            </div>

                            <div class="tab-pane" id="modal-reviews">
                                <h3>商品评价</h3>
                                <div class="review-list">
                                    <div class="review-item">
                                        <div class="review-user">用户1</div>
                                        <div class="review-content">商品质量很好，非常满意！</div>
                                        <div class="review-date">2023-05-15</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 购物车模态框 -->
    <div id="cart-modal" class="modal">
        <div class="modal-content">
            <span class="close" id="close-cart">&times;</span>
            <h2>购物车</h2>
            <div id="cart-items">
                <!-- 购物车商品将通过JS动态加载 -->
            </div>
            <div class="cart-total">
                <span>总计: <span id="cart-total-price">¥0.00</span></span>
                <button id="checkout-btn" class="btn">结算</button>
            </div>
        </div>
    </div>

    <!-- 提示框 -->
    <div id="toast" class="toast"></div>

    <script>
        // 商品数据
        const products = [
            {
                id: 1,
                name: "Apple iPhone 16 Pro Max",
                price: 7999,
                image: "./images/products/product-1.jpg", // 本地图片路径
                category: "手机数码",
                description: "Apple iPhone 16 Pro Max 256GB 沙漠色钛金属 支持移动联通电信5G 双卡双待",
                details: {
                    brand: "iPhone 16 Pro Max",
                    model: "iPhone 16 Pro Max",
                    color: "暗紫色",
                    storage: "256GB",
                    screen: "6.9英寸",
                    camera: "4800万像素主摄"
                },
                stock: 100,
                sales: 500
            },
            {
                id: 2,
                name: "华为 Mate70 Pro",
                price: 6799,
                image: "./images/products/product-2.jpg", // 本地图片路径
                category: "手机数码",
                description: "华为 Mate 70 Pro 512GB 雪域白 鸿蒙操作系统 超光变XMAGE影像",
                details: {
                    brand: "华为mate70pro",
                    model: "华为 Mate70 Pro",
                    color: "雪域白",
                    storage: "512GB",
                    screen: "6.9英寸",
                    camera: "5000万像素超光变"
                },
                stock: 150,
                sales: 300
            },
            {
                id: 3,
                name: "小米 15 Pro",
                price: 4999,
                image: "./images/products/product-3.jpg", // 本地图片路径
                category: "手机数码",
                description: "小米 15 Pro 12GB+256GB 云杉绿 徕卡光学镜头 120Hz高刷屏",
                details: {
                    brand: "小米",
                    model: "15 Pro",
                    color: "云杉绿",
                    storage: "12GB+256GB",
                    screen: "6.73英寸",
                    camera: "5000万徕卡三摄"
                },
                stock: 200,
                sales: 400
            },
            {
                id: 4,
                name: "联想拯救者Y9000P",
                price: 9999,
                image: "./images/products/product-4.jpg", // 本地图片路径
                category: "电脑办公",
                description: "联想拯救者Y9000P 2023 16英寸游戏笔记本电脑(i9-13900HX 16G 1T RTX4060 2.5k 240Hz)",
                details: {
                    brand: "联想",
                    model: "拯救者Y9000P",
                    cpu: "i9-13900HX",
                    ram: "16GB",
                    storage: "1TB SSD",
                    gpu: "RTX4060"
                },
                stock: 50,
                sales: 100
            },
            {
                id: 5,
                name: "戴尔 灵越16Plus",
                price: 8999,
                image: "./images/products/product-5.jpg", // 本地图片路径
                category: "电脑办公",
                description: "戴尔 灵越16Plus 7620 16英寸高性能轻薄本(i7-12700H 16G 512G RTX3050Ti 3K屏)",
                details: {
                    brand: "戴尔",
                    model: "灵越16Plus",
                    cpu: "i7-12700H",
                    ram: "16GB",
                    storage: "512GB SSD",
                    gpu: "RTX3050Ti"
                },
                stock: 80,
                sales: 150
            },
            {
                id: 6,
                name: "索尼 PlayStation 5",
                price: 3899,
                image: "./images/products/product-6.jpg", // 本地图片路径
                category: "家用电器",
                description: "索尼 PlayStation 5 游戏主机 光驱版 国行",
                details: {
                    brand: "索尼",
                    model: "PlayStation 5",
                    type: "光驱版",
                    storage: "825GB SSD",
                    resolution: "8K"
                },
                stock: 30,
                sales: 200
            },
            {
                id: 7,
                name: "美的 变频空调",
                price: 3299,
                image: "./images/products/product-7.jpg", // 本地图片路径
                category: "家用电器",
                description: "美的 1.5匹 变频 新一级能效 冷暖 壁挂式空调 KFR-35GW/N8XHC1",
                details: {
                    brand: "美的",
                    model: "KFR-35GW/N8XHC1",
                    type: "壁挂式",
                    power: "1.5匹",
                    energy: "新一级能效"
                },
                stock: 120,
                sales: 300
            },
            {
                id: 8,
                name: "五常大米 10kg",
                price: 99,
                image: "./images/products/product-8.jpg", // 本地图片路径
                category: "食品生鲜",
                description: "五常大米 稻花香2号 10kg 东北大米 当季新米",
                details: {
                    brand: "五常",
                    weight: "10kg",
                    origin: "黑龙江五常",
                    package: "真空包装"
                },
                stock: 500,
                sales: 1000
            }
        ];

        // 用户状态管理
        class User {
            static isLoggedIn() {
                return localStorage.getItem('currentUser') !== null;
            }

            static getCurrentUser() {
                return JSON.parse(localStorage.getItem('currentUser'));
            }

            static logout() {
                localStorage.removeItem('currentUser');
                updateUserStatus();
                showToast('已成功退出登录');
            }

            static login(username) {
                localStorage.setItem('currentUser', JSON.stringify({ username }));
                updateUserStatus();
                showToast(`欢迎回来，${username}`);
                document.getElementById('login-modal').style.display = 'none';
            }
        }

        // 购物车管理
        class Cart {
            constructor() {
                this.items = JSON.parse(localStorage.getItem('cart')) || [];
                this.updateCartCount();
                this.renderCartItems();
            }

            addItem(product, quantity = 1) {
                const existingItem = this.items.find(item => item.id === product.id);

                if (existingItem) {
                    existingItem.quantity += quantity;
                } else {
                    this.items.push({
                        ...product,
                        quantity: quantity
                    });
                }

                this.save();
                showToast(`已将${product.name}加入购物车`);
            }

            removeItem(id) {
                this.items = this.items.filter(item => item.id !== id);
                this.save();
            }

            updateQuantity(id, quantity) {
                const item = this.items.find(item => item.id === id);
                if (item) {
                    if (quantity <= 0) {
                        this.removeItem(id);
                    } else {
                        item.quantity = parseInt(quantity);
                        this.save();
                    }
                }
            }

            save() {
                localStorage.setItem('cart', JSON.stringify(this.items));
                this.updateCartCount();
                this.renderCartItems();
            }

            updateCartCount() {
                const cartCount = this.items.reduce((total, item) => total + item.quantity, 0);
                document.getElementById('cart-count').textContent = cartCount;
            }

            renderCartItems() {
                const cartItemsContainer = document.getElementById('cart-items');
                cartItemsContainer.innerHTML = '';

                this.items.forEach(item => {
                    const cartItem = document.createElement('div');
                    cartItem.classList.add('cart-item');
                    cartItem.innerHTML = `
                        <div class="cart-item-image">
                            <img src="${item.image}" alt="${item.name}">
                        </div>
                        <div class="cart-item-info">
                            <h3>${item.name}</h3>
                            <p class="price">¥${item.price.toFixed(2)}</p>
                            <div class="quantity">
                                <button class="decrease" onclick="cart.updateQuantity(${item.id}, ${item.quantity - 1})">-</button>
                                <input type="number" value="${item.quantity}" min="1" onchange="cart.updateQuantity(${item.id}, this.value)">
                                <button class="increase" onclick="cart.updateQuantity(${item.id}, ${item.quantity + 1})">+</button>
                            </div>
                            <button class="remove-item btn" onclick="cart.removeItem(${item.id})">移除</button>
                        </div>
                    `;
                    cartItemsContainer.appendChild(cartItem);
                });

                this.updateTotalPrice();
            }

            updateTotalPrice() {
                const totalPrice = this.items.reduce((total, item) => total + item.price * item.quantity, 0);
                document.getElementById('cart-total-price').textContent = `¥${totalPrice.toFixed(2)}`;
            }

            clear() {
                this.items = [];
                this.save();
            }

            getTotalPrice() {
                return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
            }
        }

        const cart = new Cart();

        // 搜索功能
        function searchProducts(query) {
            const resultsContainer = document.getElementById('search-results-list');
            const noResultsContainer = document.getElementById('no-results');
            const searchQuerySpan = document.getElementById('search-query');
            const searchResultsTitle = document.getElementById('search-results-title');
            const searchResultsSection = document.getElementById('search-results');
            const hotProductsSection = document.getElementById('hot-products').parentElement;

            // 清空之前的结果
            resultsContainer.innerHTML = '';

            // 隐藏热门商品，显示搜索结果区域
            hotProductsSection.style.display = 'none';
            searchResultsSection.style.display = 'block';
            searchQuerySpan.textContent = query;
            searchResultsTitle.textContent = `搜索"${query}"的结果`;

            // 执行搜索
            const filteredProducts = products.filter(product =>
                product.name.includes(query) ||
                product.category.includes(query) ||
                product.description.includes(query)
            );

            if (filteredProducts.length === 0) {
                noResultsContainer.style.display = 'block';
                resultsContainer.style.display = 'none';
            } else {
                noResultsContainer.style.display = 'none';
                resultsContainer.style.display = 'grid';

                filteredProducts.forEach(product => {
                    const productItem = document.createElement('div');
                    productItem.classList.add('product-item');
                    productItem.innerHTML = `
                        <div class="product-image">
                            <img src="${product.image}" alt="${product.name}">
                        </div>
                        <div class="product-info">
                            <h3 class="product-title">${product.name}</h3>
                            <p class="product-price">¥${product.price.toFixed(2)}</p>
                            <div class="product-actions">
                                <button class="btn" onclick="addToCart(${product.id})">加入购物车</button>
                                <button class="btn" onclick="showProductDetails(${product.id})">查看详情</button>
                            </div>
                        </div>
                    `;
                    resultsContainer.appendChild(productItem);
                });
            }
        }

        // 结算功能
        function checkout() {
            if (!User.isLoggedIn()) {
                showToast('请先登录后再结算');
                document.getElementById('login-modal').style.display = 'block';
                return;
            }

            if (cart.items.length === 0) {
                showToast('购物车为空，无法结算');
                return;
            }

            // 创建订单
            const order = {
                id: Date.now(),
                date: new Date().toLocaleString(),
                items: [...cart.items],
                total: cart.getTotalPrice(),
                status: '待付款'
            };

            // 保存订单到本地存储
            const orders = JSON.parse(localStorage.getItem('orders')) || [];
            orders.push(order);
            localStorage.setItem('orders', JSON.stringify(orders));

            // 清空购物车
            cart.clear();

            // 关闭购物车模态框
            document.getElementById('cart-modal').style.display = 'none';

            // 显示订单确认信息
            alert(`订单创建成功！\n订单号: ${order.id}\n总金额: ¥${order.total.toFixed(2)}\n请及时付款`);
        }

        // 返回首页
        function goHome() {
            // 隐藏所有模态框
            document.getElementById('login-modal').style.display = 'none';
            document.getElementById('product-modal').style.display = 'none';
            document.getElementById('cart-modal').style.display = 'none';
            
            // 隐藏搜索结果，显示热门商品
            document.getElementById('search-results').style.display = 'none';
            document.getElementById('hot-products').parentElement.style.display = 'block';
            
            // 重置搜索框
            document.getElementById('search-input').value = '';
        }

        // 初始化页面
        function init() {
            updateUserStatus();
            renderHotProducts();
            initSlider();

            // 搜索按钮事件
            const searchBtn = document.getElementById('search-btn');
            const searchInput = document.getElementById('search-input');

            searchBtn.addEventListener('click', () => {
                const query = searchInput.value.trim();
                if (query) {
                    searchProducts(query);
                } else {
                    showToast('请输入搜索关键词');
                }
            });

            searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    const query = searchInput.value.trim();
                    if (query) {
                        searchProducts(query);
                    } else {
                        showToast('请输入搜索关键词');
                    }
                }
            });

            // 为登录链接添加事件监听器
            const loginLink = document.getElementById('login-link');
            const loginModal = document.getElementById('login-modal');
            const closeLogin = document.getElementById('close-login');
            const loginForm = document.getElementById('login-form');

            loginLink.addEventListener('click', () => {
                loginModal.style.display = 'block';
            });

            closeLogin.addEventListener('click', () => {
                loginModal.style.display = 'none';
            });

            loginForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const username = document.getElementById('username').value;
                User.login(username);
            });

            // 为退出链接添加事件监听器
            const logoutLink = document.getElementById('logout-link');
            logoutLink.addEventListener('click', () => {
                User.logout();
            });

            // 为购物车链接添加事件监听器
            const cartLink = document.querySelector('.cart-icon');
            const cartModal = document.getElementById('cart-modal');
            const closeCart = document.getElementById('close-cart');

            cartLink.addEventListener('click', () => {
                cartModal.style.display = 'block';
            });

            closeCart.addEventListener('click', () => {
                cartModal.style.display = 'none';
            });

            // 为结算按钮添加事件监听器
            const checkoutButton = document.getElementById('checkout-btn');
            checkoutButton.addEventListener('click', checkout);

            // 为商品详情模态框添加事件监听器
            const closeProduct = document.getElementById('close-product');
            const modalAddToCart = document.getElementById('modal-add-to-cart');
            
            closeProduct.addEventListener('click', () => {
                document.getElementById('product-modal').style.display = 'none';
            });
            
            modalAddToCart.addEventListener('click', () => {
                const productId = parseInt(document.getElementById('modal-product-title').dataset.productId);
                const quantity = parseInt(document.getElementById('modal-quantity').value);
                const product = products.find(p => p.id === productId);
                if (product) {
                    cart.addItem(product, quantity);
                    document.getElementById('product-modal').style.display = 'none';
                }
            });
        }

        // 初始化轮播图
        function initSlider() {
            const slides = document.querySelectorAll('.slide');
            const dots = document.querySelector('.slider-dots');
            const prevBtn = document.querySelector('.prev');
            const nextBtn = document.querySelector('.next');
            let currentSlide = 0;

            // 创建指示点
            slides.forEach((_, index) => {
                const dot = document.createElement('div');
                dot.classList.add('dot');
                if (index === 0) dot.classList.add('active');
                dot.addEventListener('click', () => goToSlide(index));
                dots.appendChild(dot);
            });

            // 自动轮播
            let slideInterval = setInterval(nextSlide, 5000);

            // 下一张
            function nextSlide() {
                goToSlide(currentSlide + 1);
            }

            // 上一张
            function prevSlide() {
                goToSlide(currentSlide - 1);
            }

            // 跳转到指定幻灯片
            function goToSlide(n) {
                slides[currentSlide].classList.remove('active');
                dots.children[currentSlide].classList.remove('active');
                
                currentSlide = (n + slides.length) % slides.length;
                
                slides[currentSlide].classList.add('active');
                dots.children[currentSlide].classList.add('active');
            }

            // 按钮事件
            prevBtn.addEventListener('click', () => {
                clearInterval(slideInterval);
                prevSlide();
                slideInterval = setInterval(nextSlide, 5000);
            });

            nextBtn.addEventListener('click', () => {
                clearInterval(slideInterval);
                nextSlide();
                slideInterval = setInterval(nextSlide, 5000);
            });

            // 鼠标悬停暂停轮播
            const slider = document.querySelector('.slider');
            slider.addEventListener('mouseenter', () => {
                clearInterval(slideInterval);
            });

            slider.addEventListener('mouseleave', () => {
                slideInterval = setInterval(nextSlide, 5000);
            });
        }

        // 渲染热门商品
        function renderHotProducts() {
            const hotProductsContainer = document.getElementById('hot-products');
            products.forEach(product => {
                const productItem = document.createElement('div');
                productItem.classList.add('product-item');
                productItem.innerHTML = `
                    <div class="product-image">
                        <img src="${product.image}" alt="${product.name}">
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">${product.name}</h3>
                        <p class="product-price">¥${product.price.toFixed(2)}</p>
                        <div class="product-actions">
                            <button class="btn" onclick="addToCart(${product.id})">加入购物车</button>
                            <button class="btn" onclick="showProductDetails(${product.id})">查看详情</button>
                        </div>
                    </div>
                `;
                hotProductsContainer.appendChild(productItem);
            });
        }

        // 更新用户状态
        function updateUserStatus() {
            const loginLink = document.getElementById('login-link');
            const registerLink = document.getElementById('register-link');
            const profileLink = document.getElementById('profile-link');
            const logoutLink = document.getElementById('logout-link');

            if (User.isLoggedIn()) {
                loginLink.style.display = 'none';
                registerLink.style.display = 'none';
                profileLink.style.display = 'inline';
                logoutLink.style.display = 'inline';
                profileLink.textContent = `欢迎，${User.getCurrentUser().username}`;
            } else {
                loginLink.style.display = 'inline';
                registerLink.style.display = 'inline';
                profileLink.style.display = 'none';
                logoutLink.style.display = 'none';
            }
        }

        // 显示提示框
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        // 添加商品到购物车
        function addToCart(productId) {
            const product = products.find(p => p.id === productId);
            if (product) {
                cart.addItem(product);
            }
        }

        // 显示商品详情
        function showProductDetails(productId) {
            const product = products.find(p => p.id === productId);
            if (product) {
                const modal = document.getElementById('product-modal');
                const modalTitle = document.getElementById('modal-product-title');
                const modalImage = document.getElementById('modal-main-image');
                const modalPrice = document.getElementById('modal-product-price');
                const modalSales = document.getElementById('modal-sales-volume');
                const modalStock = document.getElementById('modal-stock-count');
                const modalDescription = document.getElementById('modal-product-description');
                const modalSpecTable = document.getElementById('modal-spec-table');
                const modalCategoryLink = document.getElementById('modal-category-link');
                const modalProductName = document.getElementById('modal-product-name');

                modalTitle.textContent = product.name;
                modalTitle.dataset.productId = product.id;
                modalImage.src = product.image;
                modalPrice.textContent = `¥${product.price.toFixed(2)}`;
                modalSales.textContent = product.sales;
                modalStock.textContent = product.stock;
                modalDescription.textContent = product.description;
                modalCategoryLink.textContent = product.category;
                modalProductName.textContent = product.name;

                // 清空规格参数表格
                modalSpecTable.innerHTML = '';
                for (const key in product.details) {
                    const row = document.createElement('tr');
                    const specName = document.createElement('td');
                    const specValue = document.createElement('td');
                    specName.textContent = key;
                    specValue.textContent = product.details[key];
                    row.appendChild(specName);
                    row.appendChild(specValue);
                    modalSpecTable.appendChild(row);
                }

                modal.style.display = 'block';
            }
        }

        // 初始化页面
        init();
    </script>
</body>a

</html>